<template>
  <el-dialog
    title="userRole信息"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
  >
    <div>
      <div class="search-group">
        <div class="search-item">
          <!--                            <el-input v-model="query.roleId" placeholder="请输入角色id" />-->
        </div>
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="add()" />
          <el-button icon="el-icon-search" @click="search" />
          <el-button icon="el-icon-refresh" @click="reset" />
        </el-button-group>
      </div>
      <div class="content">
        <el-table v-loading="table.loading" :data="table.data" border style="width: 100%">
          <el-table-column align="center" label="用户角色id" prop="userRoleId" />
          <el-table-column align="center" label="角色名称" prop="roleName" />
          <el-table-column align="center" label="操作" fixed="right" width="100px">
            <template slot-scope="{row}">
              <el-button-group class="operation">
                <!--                                <el-button type="text" @click="edit('see',row.id)">详情</el-button>-->
                <!--                                <el-button type="text" @click="edit('edit',row.id)">编辑</el-button>-->
                <c-button type="text" auto-confirm @confirm="remove(row.userRoleId)" />
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <table-page :total="table.total" :current="query.pageNum" :size="query.pageSize" @settingTablePage="settingTablePage" />
      </div>
      <Edit ref="edit" @refreshPageData="search" />
    </div>
  </el-dialog>
</template>

<script>
import { deleteUserRoleById, getSysRoleByIdPage } from '@/api/modules/system/sysUserApi'
import Edit from '@/views/modules/system/sysUser/operation/sysUserEditOneToManyTable'
import TablePage from '@/components/tablePage'
import CButton from '@/components/confirmButton/CButton'

export default {
  name: 'OneToManyTable',
  components: { CButton, TablePage, Edit },
  data() {
    return {
      dialogVisible: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        id: null,
        username: null,
        delFlag: null
      },
      table: {
        data: null,
        total: null,
        loading: false
      }
      /* 字典表数据*/
    }
  },
  created() {
  },
  methods: {
    search() {
      this.query.pageNum = 1
      this.getTableData()
    },
    add() {
      this.$refs['edit'].open({
        optionType: 'add',
        optionId: null,
        // 操作主表的id
        mainTableId: this.query.userId
      })
    },
    settingTablePage(pageNum, pageSize) {
      this.query.pageNum = pageNum
      this.query.pageSize = pageSize
      this.getTableData()
    },
    reset() {
      const userId = this.query.userId
      this.query = {
        pageNum: 1,
        pageSize: 10,
        userId: userId,
        roleId: null
      }
      this.search()
    },
    getTableData() {
      this.table.loading = true
      getSysRoleByIdPage(this.query).then(res => {
        this.table.total = res.total
        this.table.data = res.rows
        this.table.loading = false
      })
    },
    edit(optionType, id) {
      this.$refs['edit'].open({
        optionType: optionType,
        optionId: id,
        // 操作主表的id
        mainTableId: this.query.userId
      })
    },
    open(id) {
      this.query.userId = id
      this.dialogVisible = true
      this.getTableData()
      /* 设置字典值*/
    },
    remove(id) {
      deleteUserRoleById(id).then(res => {
        this.$message.success('删除成功')
        this.search()
      })
    }
  }
}
</script>

<style scoped>

</style>
